// 清单
<template>
  <div>
    <ul class="colorF font_s22 textC tb_list flex"  style="background-color: #042a79;color: #fff">
      <li
        v-for="(item, index) in orgTabletitle"
        :key="index"
        :class="[{'flex1':index%2 != 1},{'flex2':index%2 != 0}]">{{ item }}</li>
    </ul>
    <div class="superviseList font_s18 " style="height: 67vh;margin: 0px 0rem 0rem;padding-bottom: 2rem;box-sizing: border-box">
      <ul class="flex tb_list colorF font_s16 textC "
          :class="{evenbg:index%2==1}"
          v-for="(item, index) in dataList"
          :key=item.orgId>
        <li class="flex1 num">{{ index+1 }}</li>
        <li class="flex2 txt">{{ item.orgName }}</li>
        <li class="flex1 txt">{{ item.principal }}</li>
        <li class="flex2 txt">{{ item.orgAddr }}</li>
        <li class="flex1 num">{{ item.orgArea }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Listing',
  props: {
    dataList: {
      type: Array,
      required: true
    },
    orgTabletitle: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
  ul.tb_list li{
    margin: 1rem 0 1rem 1rem;
    padding: .6rem 0;
    box-sizing: border-box;
    text-align: center;
  }
  ul.evenbg {
    background-color: #0c1e51;
    background-position: 100% 100%;
  }
  .num {
    font-family: Impact;
    font-weight: 400;
  }
  .txt {
    font-family: Microsoft YaHei;
    font-weight: normal;
  }
.superviseList {
  overflow-x: hidden;
  overflow-y: auto
}
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;height: 0;
}
</style>
